<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-04-06 17:20:14
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-23 14:50:21
 * @Description:
 *
-->

<template>
  <div class="warning-stat-ctn">
    <div class="title">Warning事件</div>
    <div class="content">
      <div id="chart-warning"></div>
      <div class="radio-group">
        <div
          :class="['item', chartTimeType === '24hour' ? 'active' : '']"
          @click="chartTimeTypeChange('24hour')"
        >
          近24小时
        </div>
        <div
          :class="['item', chartTimeType === '7day' ? 'active' : '']"
          @click="chartTimeTypeChange('7day')"
        >
          近一周
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getWoringInfo } from '@/api/cnap/situation.js'
import { parseTime } from '@/utils/utils'

export default {
  name: 'WarningEvent',
  props: {},
  data() {
    return {
      chart: null,
      chartTimeType: '24hour', // 图表筛选时间
      chartData: [] // 图表数据
    }
  },
  computed: {
    /**
     * @description: 横坐标
     * @return {*}
     */
    xAxisData() {
      const xdata = []
      // 循环遍历
      for (const item of this.chartData) {
        const date = parseTime(item.timestamp, '{m}/{d} {h}:{i}') // 格式化时间
        xdata.push(date)
      }
      return xdata
    },
    /**
     * @description: 数据
     * @return {*}
     */
    seriesData() {
      const seriesData = []
      for (const item of this.chartData) {
        // 循环
        seriesData.push({
          value: Number(item.warning),
          time: parseTime(item.timestamp, '{m}/{d} {h}:{i}') // 格式化日期
        })
      }
      return seriesData
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getWarningChartData() // 请求告警统计表数据
  },
  methods: {
    /**
     * @description: 配置
     * @return {*}
     */
    setChart() {
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById('chart-warning')) // 初始化
      }
      this.chart.setOption({
        tooltip: {
          trigger: 'axis', // 触发类型
          axisPointer: {
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          },
          confine: true
        },
        grid: {
          left: '5',
          right: '2',
          bottom: '2',
          top: 35,
          containLabel: true
        },
        xAxis: {
          // 横坐标配置
          type: 'category',
          axisTick: {
            // tick样式
            show: false // 不显示
          },
          axisLabel: {
            // 文本样式
            show: true, // 显示
            color: '#7B9CB8' // 颜色
          },
          axisLine: {
            // 线条样式
            show: true, // 显示
            lineStyle: {
              color: '#627D93' // 颜色
            }
          },
          data: this.xAxisData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            // 线条样式
            show: false // 不显示
          },
          axisLabel: {
            // 文本样式
            show: true, // 显示
            color: '#7B9CB8' // 颜色
          },
          splitLine: {
            // 分割线样式
            show: true, // 显示
            lineStyle: {
              color: '#4E6374', // 颜色
              type: 'dashed' // 类型
            }
          },
          axisTick: {
            // tick样式
            show: false // 不显示
          }
        },
        series: [{
          name: 'Warning事件',
          type: 'bar', // 样式
          barWidth: 10, // 宽度
          itemStyle: { // 图形样式
            normal: {
              barBorderRadius: [5, 5, 0, 0], // 间隔
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0, color: 'rgba(51, 255, 0, 0.8000)'
              },
              {
                offset: 1, color: 'rgba(1, 238, 52, 0.5000)'
              }], false)
            }
          },
          data: this.seriesData // 数据源
        }]
      })
      this.chart.on('click', (params) => {
        this.$router.push({
          name: 'SystemMonitorAlarm',
          query: {
            activeTab: 'EventOverview'
          }
        })
      })
    },
    /**
     * @description: 图标数据分类切换
     * @return {*}
     */
    chartTimeTypeChange(val) {
      this.chartTimeType = val
      this.getWarningChartData() // 请求数据
    },
    /**
     * @description: 获取告警统计
     * @return {*}
     */
    getWarningChartData() {
      // 请求
      getWoringInfo({
        type: this.chartTimeType
      })
        .then((res) => {
          this.chartData =
            res.data && Array.isArray(res.data.data) ? res.data.data : []
          if (this.chartData.length > 0) {
            this.setChart() // 设置图表
          }
        })
        .catch(() => {
          this.chartData = []
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.warning-stat-ctn {
  width: 810px;

  .title {
    width: 810px;
    height: 29px;
    line-height: 28px;
    background: url("~@/assets/imgs/situation/bg_title_normal_long.png")
      no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 25px;
    .textStyle(16px , 600, #03d3ff);
  }

  .content {
    margin-top: 10px;
    box-sizing: border-box;
    padding: 8px 10px;
    height: 160px;
    background: linear-gradient(
      357deg,
      rgba(75, 121, 170, 0.37) 0%,
      rgba(19, 61, 91, 0.37) 100%
    );
    position: relative;

    .radio-group {
      position: absolute;
      right: 10px;
      top: 6px;
      display: flex;
      align-items: center;
      .item {
        padding: 2px 8px;
        background: rgba(0, 107, 192, 0.3);
        border: 1px solid #0187d9;
        .textStyle(12px, 400, #018ce7);
        cursor: pointer;

        &.active {
          background: rgba(3, 141, 255, 0.4);
          border: 1px solid #0399ff;
          .textStyle(12px, 500, #03b2ff);
        }
      }
    }

    #chart-warning {
      height: 150px;
      overflow: hidden;
    }
  }
}
</style>
